import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

import { useAutoHandleTabbar } from '../hooks/useTabbar';

export default function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('username: ', username);
    console.log('password: ', password);

    localStorage.setItem('token', username);
    navigate('/');
  };

  useAutoHandleTabbar();
  return (
    <div>
      <h1>Login</h1>
      <div className='login'>
        <div>
          <input
            type='text'
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder='Username'
          />
        </div>

        <div>
          <input
            type='password'
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder='Password'
          />
        </div>
        <div>
          <button onClick={handleSubmit}>Login</button>
        </div>
      </div>
    </div>
  );
}
